<template>
<view class="noticeBody" :style="{height:windowHeight+'px'}">
  <scroll-view :style="{height:windowHeight+'px'}" :scroll-top="scrollTop" @scrolltolower="getNotice" scroll-y="true">
    <notice-card v-for="item in noticeList" :notice="item"></notice-card>
    <view v-if="end" class="end">没有更多内容...</view>
  </scroll-view>
</view>
</template>

<script>
import noticeCard from "@/components/noticeCard";
import {appletSysNotice} from "@/service/api/notice";
export default {
  name: "index",
  components:{noticeCard},
  data(){
    return {
      windowHeight:0,
      noticeList: [],
      end: false,
      query: {
        page:1,
        size:20
      }
    }
  },
  created() {
    uni.getSystemInfo({
      success: res => {
        this.windowHeight = res.windowHeight;
      }
    });
    this.onGet()
  },
  onPullDownRefresh(){
    this.query.page = 1
    this.noticeList = []
    this.onGet()
    uni.stopPullDownRefresh()
  },
  methods:{
    onGet(){
      this.uniShowLoading()
      const that = this
      appletSysNotice(this.query).then(res=>{
        that.uniHideLoading()
        if(res.status === 200){
          if (res.data.content.length === 0){
            that.end = true
            return
          }
          that.noticeList = [...this.noticeList,...res.data.content]
        }
      }).catch(error=>{
        that.uniHideLoading()
      })
    },
    getNotice(){
      if (this.end){
       return
      }
      this.query.page += 1
      this.onGet()
    }
  }
}
</script>

<style scoped>
.noticeBody{
  background-color: rgba(200,200,200,0.4);
}
.end{
  height: 80rpx;
  width: 100%;
  background-color: rgba(200,200,200,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
